<template>
    <div class="chushe">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>项目申报</el-breadcrumb-item>
            <el-breadcrumb-item>年度计划申报</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="serach">
            <el-form
                :inline="true"
                :model="formData"
                label-width="104px"
                class="serachForm"
                ref="serachForm"
            >
                <el-form-item label="项目名称">
                    <el-input v-model="formData.projectName" placeholder="请输入项目/规划的关键字/编号"></el-input>
                </el-form-item>
                <el-form-item label="项目类型">
                    <el-select v-model="formData.projectCategoryName" placeholder="选择项目类型">
                        <el-option label="民政局" value="1"></el-option>
                        <el-option label="公安局" value="2"></el-option>
                        <el-option label="财政局" value="3"></el-option>
                        <el-option label="国税局" value="4"></el-option>
                        <el-option label="土地局" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评审状态">
                    <el-select v-model="formData.currentState" placeholder="选择项目状态">
                        <el-option-group
                            v-for="item in options"
                            :key="item.label"
                            :label="item.label"
                        >
                            <el-option
                                v-for="group in item.options"
                                :key="group.value"
                                :label="group.label"
                                :value="group.value"
                            ></el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="serachBtn">
                <el-button-group>
                    <el-button @click="getList()" type="primary">查询</el-button>
                    <!-- <el-button type="plain" @click="resetForm('serachForm')">重置</el-button> -->
                </el-button-group>
            </div>
        </div>
        <div class="container">
            <div class="addBtn">
                <el-button @click="add" type="primary" icon="el-icon-plus">新增</el-button>
                <span class="reportTime">2018-2019年年度计划上报时间：2018/02/15—2018/03/15</span>
            </div>
          
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="68" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" width="180" align="center"></el-table-column>
                <el-table-column prop="projectNo" label="项目编号" width="180" align="center"></el-table-column>
                <el-table-column prop="projectBudget" label="项目概算" align="center">
                    <template slot-scope="scope">
                        <span style="color: #CC3322">{{scope.row.projectBudget}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="projectBudget" label="可研状态/初设及概算评审状态" align="center">
                    <template slot-scope="scope">
                     <span style="color: #CC3322">{{scope.row.canResearch|formatCanResearch}}/{{scope.row.reviewStatus|formatReviewStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="projectCategoryName" label="项目类型" align="center">
                    <template slot-scope="scope">
                        <span style="color: #CC3322">{{scope.row.projectCategoryName | formatProject}}</span>
                    </template>                    
                </el-table-column>
                <el-table-column prop="isCapitalClear" label="资金是否明确" align="center">
                    <template slot-scope="scope">
                        <span style="color: #CC3322">{{scope.row.isCapitalClear|formatIsCapitalClear}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="currentState" label="状态" align="center" width="80">
                    <template slot-scope="scope">
                        <span>{{scope.row.currentState|formatState}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-link
                            type="primary"
                            @click="handleClick(scope.row, 'view')"
                            size="small"
                        >查看</el-link>
                        <template v-if="scope.row.currentState !== 102">
                            <el-divider direction="vertical"></el-divider>
                            <el-link
                                type="primary"
                                @click="handleClick(scope.row, 'edit')"
                                size="small"
                            >编辑</el-link>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.pageTotal"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            options: [
                {
                    label: "",
                    options: [
                        {
                            value: 99,
                            label: "可研通过"
                        },
                        {
                            value: 100,
                            label: "初设通过"
                        },
                        {
                            value: 101,
                            label: "初设草稿"
                        },
                        {
                            value: 102,
                            label: "初设已提交"
                        }
                    ]
                },
                {
                    label: "初设A",
                    options: [
                        {
                            value: 30,
                            label: "规划处联合评审(处领导)"
                        },
                        {
                            value: 31,
                            label: "批复(处领导)"
                        }
                    ]
                },
                {
                    label: "初设B",
                    options: [
                        {
                            value: 40,
                            label: "专业技术委员会审查"
                        },
                        {
                            value: 41,
                            label: "规划处联合评审(处领导)"
                        },
                        {
                            value: 42,
                            label: "批复(处领导)"
                        }
                    ]
                },
                {
                    label: "初设C",
                    options: [
                        {
                            value: 50,
                            label: "专家咨询委员会审查"
                        },
                        {
                            value: 51,
                            label: "规划处联合评审(处领导)"
                        },
                        {
                            value: 52,
                            label: "批复(处领导)"
                        }
                    ]
                }
            ],

            currentPage: 1,
            formData: {},
            searchTime: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    }
                ]
            },
            tableData: [],
            pageData: {
                pageNumber: 1,
                pageSize: 10,
                pageTotal: 0
            }
        };
    },
    filters:{
        formatProject (val) {
            if (val === 1) {
                return '全市发展规划'
            } else if (val === 2) {
                return '专项发展规划'
            } else if (val === 3) {
                return '软件开发'
            } else if (val === 4) {
                return '系统集成'
            } else if (val === 5) {
                return '民政局'
            } else if (val === 6) {
                return '公安局'
            } else if (val === 7) {
                return '财政局'
            } else if (val === 8) {
                return '国税局'
            } else {
                return '土地局'
            }
        },
        formatCanResearch(val){
             if(val==2){
                return '是'
            }else{
                return '否' 
            }
        },
        formatReviewStatus(val){
             if(val==2){
                return '是'
            }else{
                return '否' 
            }
        },
        formatIsCapitalClear(val){
             if(val==1){
                return '是'
            }else{
                return '否' 
            }
        },
        formatState(val){
        if(val==1){
             return '草稿'
         }else if(val==2){
             return '已提交'
         }else if(val==3){
             return '规划处确认'
         }else if(val==4){
             return '规划处联合会商'
         }else if(val==5){
             return '市领导审定'
         }else if(val==6){
             return '申报通过'
         }else if(val==7){
             return '申报不通过'
         }
        }

    },
    mounted() {
        this.getList();
    },
    methods: {
        getList(page) {
            if (page) {
                this.pageData.pageNum = page;
            }
            let params = Object.assign(this.pageData, this.formData);
            this.axios.get("/projectApply/getList", { params }).then(res => {
                this.tableData = res.data.records;
                this.pageData.pageTotal = res.data.total;
            });
        },
        handleClick(row, type) {
            if (type == "view") {
                this.$router.push({
                    name: "detailManage",
                    query: { id: row.primaryProjectId }
                });
            } else {
                this.$router.push({
                    name: "addShenbaoManage",
                    query: { id: row.primaryProjectId }
                });
            }
        },
        handleSizeChange(value) {
            this.pageData.pageSize = value;
            this.getList();
        },
        handleCurrentChange(value) {
            this.getList(value);
        },
        add() {
            this.$router.push({ name: "addShenbaoManage" });
        },
        resetForm(formName) {
            this.searchTime = []
            this.formData = {}
        }
    }
};
</script>

<style lang="less" scoped>

.chushe {
    .serach {
        padding-top: 20px;
        display: flex;
        .serachBtn {
            padding: 20px 0;
            width: 158px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #edf0fa;
        }
        .serachForm {
            padding: 20px 0;
            flex: 1;
            background-color: #fff;
        }
    }
    .el-input--small {
        width: 176px !important;
    }

    .container {
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        .addBtn {
            margin-bottom: 20px;
        }
        .reportTime{
          margin-left:20px;
        }
        .page {
            padding-top: 20px;
            text-align: right;
        }
    }
}
</style>
